<!-- 用电成本分析 -->
<template>
  <div class="cost">
    <!-- ==========日期========== -->
    <div class='operate card'>
      <div>
        <el-date-picker style="width:140px" v-model="s_time" :editable='false' :clearable="false" :type='d_type' :format="v_type" :value-format='v_type' :picker-options="pickerOptions" placeholder="选择日期时间">
        </el-date-picker>
      </div>
      <div class='hidden-xs-only'>
        <i class='el-icon-minus'></i>
      </div>
      <div>
        <el-tooltip content="查询时间跨度最小为28天最大为92天" placement="top">
          <el-date-picker style="width:140px" v-model="e_time" :editable='false' :clearable="false" :type='d_type' :format="v_type" :value-format='v_type' :picker-options="pickerOptions" placeholder="选择日期时间">
          </el-date-picker>
        </el-tooltip>
      </div>
      <div>
        <el-button type="primary" @click='t_button'>查询</el-button>
      </div>
    </div>
    <!-- ==========总成本========== -->
    <div class='card' style='background:#ffffff;padding-top: 5px'>
      <div class='chengben flex_c_b'>
        <div class='left'>
          总成本：<span style='font-size:18px;color:#ffffff'>{{findBillFees.sum}}</span> 万元
        </div>
        <div class='right'>
          分析周期：{{s_1_time}} - {{e_1_time}}
        </div>
      </div>
      <div class='dianwang flex_c_b'>
        <div class='left'>
          <i class='iconfont icon-company'></i> 国家电网
        </div>
        <div class='right'>
          <span style='font-size:18px;color:#333333'>{{findBillFees.sum}}</span> 万元

        </div>
      </div>
      <ul class='dianfei'>
        <li class='color flex_c_b'>
          <span class='left'>基本电费</span>
          <span class='right'>{{findBillFees.baseFee}}<i>万元</i></span>
        </li>
        <li class='color flex_c_b'>
          <span class='left'>电度电费</span>
          <span class='right'>{{findBillFees.elecFee.sumFees}}<i>万元</i></span>
        </li>
        <li class='flex_c_b'>
          <span class='left'>尖电费</span>
          <span class='right'>{{findBillFees.elecFee.tipFees}}<i>万元</i></span>
        </li>
        <li class='flex_c_b'>
          <span class='left'>峰电费</span>
          <span class='right'>{{findBillFees.elecFee.peakFees}}<i>万元</i></span>
        </li>
        <li class='flex_c_b'>
          <span class='left'>平电费</span>
          <span class='right'>{{findBillFees.elecFee.flatFees}}<i>万元</i></span>
        </li>
        <li class='flex_c_b'>
          <span class='left'>谷电费</span>
          <span class='right'>{{findBillFees.elecFee.valleyFees}}<i>万元</i></span>
        </li>
        <li class='color flex_c_b'>
          <span class='left'>功率因数奖惩</span>
          <span class='right'>{{findBillFees.rewardFee}}<i>万元</i></span>
        </li>
      </ul>
    </div>
    <div class='l_r_title' @click='show_1=!show_1' style="margin-top:10px">
      <p>基本电费</p>
      <p class='right'>
        <span v-if='!show_1'> <i class='el-icon-arrow-down'></i></span>
        <span v-else> <i class='el-icon-arrow-up'></i></span>
      </p>
    </div>
    <div class='jibendianfei'>
      <ul>
        <li>核算周期最大需量<span>{{table_3_data[0]?table_3_data[0].decDemand:'--'}}</span><i>kW</i></li>
        <li>基本需量电费<span>{{table_3_data[0]?table_3_data[0].basicDemandFee:'--'}}</span><i>万元</i></li>
        <li style='border:none'>
          较容量电费{{table_3_data[0]&&table_3_data[0].chargeFee>0?'超支':'节省'}}
          <span :class="table_3_data[0]&&table_3_data[0].chargeFee>0?'last_':'last'">
            {{table_3_data[0]&&table_3_data[0].chargeFee>0?'+':''}}{{table_3_data[0]?table_3_data[0].chargeFee:'--'}}
          </span><i>万元</i></li>
      </ul>
    </div>
    <el-collapse-transition>
      <div v-show='show_1'>
        <!-- ==========需量分析表========== -->
        <el-row class=''>
          <el-col>
            <Mtitle title='需量分析表' />
            <el-table :data="table_3_data" style="width: 100%">
              <el-table-column prop="spec" label="分析周期需量说明" align='center' width="120">
              </el-table-column>

              <el-table-column label="标准容需分析" align='center'>
                <el-table-column prop="decDemand" :render-header="(h)=>{return [h('span', {}, '申报需量'), h('br', {}, ['']), h('span', {}, '(kW)')]}" align='center' width="">
                </el-table-column>
                <el-table-column prop="capacityFee" :render-header="(h)=>{return [h('span', {}, '基本容量电费 '), h('br', {}, ['']), h('span', {}, '(万元)')]}" align='center' width="">
                </el-table-column>
                <el-table-column prop="basicDemandFee" :render-header="(h)=>{return [h('span', {}, '基本需量电费 '), h('br', {}, ['']), h('span', {}, '(万元)')]}" align='center' width="">
                </el-table-column>
                <el-table-column prop="saveFee" :render-header="(h)=>{return [h('span', {}, '节约费用'), h('br', {}, ['']), h('span', {}, '(万元)')]}" align='center' width="">
                  <template slot-scope="scope">
                    <span :class="scope.row.saveFee>0?'pink':'green'" class='border_r'>
                      <span v-show="scope.row.saveFee>0">+</span>
                      {{scope.row.saveFee===0 ?scope.row.saveFee: scope.row.saveFee?scope.row.saveFee:'--' }}
                    </span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="超限双倍罚款时容需分析" align='center'>
                <el-table-column prop="overRisk" :render-header="(h)=>{return [h('span', {}, '超限风险'), h('br', {}, ['']), h('span', {}, '')]}" align='center' width="">
                </el-table-column>
                <el-table-column prop="decDemand" :render-header="(h)=>{return [h('span', {}, '核算需量'), h('br', {}, ['']), h('span', {}, '(kW)')]}" align='center' width="">
                </el-table-column>
                <el-table-column prop="demandFee" :render-header="(h)=>{return [h('span', {}, '核算需量电费'), h('br', {}, ['']), h('span', {}, '(万元)')]}" align='center' width="">
                </el-table-column>
                <el-table-column prop="chargeFee" :render-header="(h)=>{return [h('span', {}, '容需价差'), h('br', {}, ['']), h('span', {}, '(万元)')]}" align='center' width="">
                  <template slot-scope="scope">
                    <span :class="scope.row.chargeFee>0?'pink':'green'" class='border_r'>
                      <span v-show="scope.row.chargeFee>0">+</span>
                      {{scope.row.chargeFee===0 ?scope.row.chargeFee: scope.row.chargeFee?scope.row.chargeFee:'--' }}
                    </span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="操作" align='center' width="110">
                <template slot-scope="scope">
                  <el-button type="success" @click='findDemandIntervalList(scope.row)' size='mini'>详情</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class='initScope border-l-r-b' style="background:#fff;padding:10px">
              <span>
                <el-checkbox v-model="checked">自定义满足范围</el-checkbox>
              </span>
              <span>
                90 ±
                <el-input v-model="initScope_input" @keyup.native="initScope_input=initScope_input.replace(/\D/g,'')" type="text" placeholder="10" style="width:50px;" :disabled="!checked" maxlength='2'></el-input>
                %
              </span>
              <span>
                <el-button type="primary" style="padding-left:16px;padding-right:16px" @click='initScope_query' :disabled='!checked||!initScope_query_loading||initScope_off'>查询
                </el-button>
              </span>
            </div>
            <el-table v-show="table_4_data.length" :show-header='false' :data="table_4_data" style="width: 100%" border>
              <el-table-column prop="spec" label="分析周期需量说明" align='center' width="120">
              </el-table-column>

              <el-table-column label="标准容需分析" align='center'>
                <el-table-column prop="decDemand" :render-header="(h)=>{return [h('span', {}, '申报需量'), h('br', {}, ['']), h('span', {}, '(kW)')]}" align='center' width="">
                </el-table-column>
                <el-table-column prop="capacityFee" :render-header="(h)=>{return [h('span', {}, '基本容量电费 '), h('br', {}, ['']), h('span', {}, '(万元)')]}" align='center' width="">
                </el-table-column>
                <el-table-column prop="basicDemandFee" :render-header="(h)=>{return [h('span', {}, '基本需量电费 '), h('br', {}, ['']), h('span', {}, '(万元)')]}" align='center' width="">
                </el-table-column>
                <el-table-column prop="saveFee" :render-header="(h)=>{return [h('span', {}, '节约费用'), h('br', {}, ['']), h('span', {}, '(万元)')]}" align='center' width="">
                  <template slot-scope="scope">
                    <span :class="scope.row.saveFee>0?'pink':'green'" class='border_r'>
                      <span v-show="scope.row.saveFee>0">+</span>
                      {{scope.row.saveFee===0 ?scope.row.saveFee: scope.row.saveFee?scope.row.saveFee:'--' }}
                    </span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="超限双倍罚款时容需分析" align='center'>
                <el-table-column prop="overRisk" :render-header="(h)=>{return [h('span', {}, '超限风险'), h('br', {}, ['']), h('span', {}, '')]}" align='center' width="">
                </el-table-column>
                <el-table-column prop="decDemand" :render-header="(h)=>{return [h('span', {}, '核算需量'), h('br', {}, ['']), h('span', {}, '(kW)')]}" align='center' width="">
                </el-table-column>
                <el-table-column prop="demandFee" :render-header="(h)=>{return [h('span', {}, '核算需量电费'), h('br', {}, ['']), h('span', {}, '(万元)')]}" align='center' width="">
                </el-table-column>
                <el-table-column prop="chargeFee" :render-header="(h)=>{return [h('span', {}, '容需价差'), h('br', {}, ['']), h('span', {}, '(万元)')]}" align='center' width="">
                  <template slot-scope="scope">
                    <span :class="scope.row.chargeFee>0?'pink':'green'" class='border_r'>
                      <span v-show="scope.row.chargeFee>0">+</span>
                      {{scope.row.chargeFee===0 ?scope.row.chargeFee: scope.row.chargeFee?scope.row.chargeFee:'--' }}
                    </span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="操作" align='center' width="110">
                <template slot-scope="scope">
                  <el-button type="success" @click='findDemandIntervalList(scope.row)' size='mini'>详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <!-- ==========最大需量区间表========== -->
        <el-row class='el_show1'>
          <el-col>
            <Mtitle @click.native.stop='table_1_show=!table_1_show'>
              <span>{{spec+'区间表'}}</span>
              <span>
                <i style="color:#999999;cursor:pointer;font-size:16px " :class='table_1_show?"el-icon-arrow-up":"el-icon-arrow-down"'></i>
              </span>
            </Mtitle>
            <el-collapse-transition>
              <div v-show='table_1_show'>
                <el-table>
                  <el-table-column :render-header="(h)=>{return [h('span', {}, this.spec+'区间 (kW)'), h('br', {}, ['']), h('span', {}, '')]}" align='center' width="300">
                  </el-table-column>
                  <el-table-column :render-header="(h)=>{return [h('span', {}, '发生时间'), h('br', {}, ['']), h('span', {}, '')]}" align='center' width="">
                  </el-table-column>
                  <el-table-column :render-header="(h)=>{return [h('span', {}, this.spec+'区间 (kW)'), h('br', {}, ['']), h('span', {}, '')]}" align='center' width="">
                  </el-table-column>
                  <el-table-column :render-header="(h)=>{return [h('span', {}, '操作'), h('br', {}, ['']), h('span', {}, '')]}" align='center' width="110">
                  </el-table-column>

                </el-table>
                <el-table :show-header='false' :data="table_1_data_c" style="width: 100%">
                  <el-table-column :render-header="(h)=>{return [h('span', {}, this.spec+'区间 (kW)'), h('br', {}, ['']), h('span', {}, '')]}" prop="interval" align='center' width="300">
                  </el-table-column>
                  <el-table-column prop="interval" align='center' width="">
                    <template slot-scope="scope">
                      <el-table :show-header='false' :data="scope.row.dataRespList" style="width: 100%">
                        <el-table-column prop="time" :render-header="(h)=>{return [h('span', {}, '发生时间'), h('br', {}, ['']), h('span', {}, '')]}" align='center' width="">
                        </el-table-column>
                        <el-table-column prop="value" :render-header="(h)=>{return [h('span', {}, '最大需量'), h('br', {}, ['']), h('span', {}, '')]}" align='center' width="">
                        </el-table-column>
                        <el-table-column prop="" :render-header="(h)=>{return [h('span', {}, '操作'), h('br', {}, ['']), h('span', {}, '')]}" align='center' width="110">
                          <template slot-scope="scope">
                            <el-button type="success" size='mini' @click='dialog_01_click(scope.row)'>详情</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </template>
                  </el-table-column>

                </el-table>

                <div v-show="table_1_data.length>5" class='down_up border-l-r-b' @click='table_1_length === 5?table_1_length =table_1_data.length:table_1_length = 5'>
                  <i :class='table_1_length===5?"el-icon-arrow-down":"el-icon-arrow-up"'></i>
                </div>
              </div>
            </el-collapse-transition>
          </el-col>
        </el-row>
        <!-- ==========需量分布图========== -->
        <el-row class='' style="background:#fff">
          <el-col>
            <Mtitle title='需量分布图'>
            </Mtitle>
            <div class='legend'>
              <span class='icon cir'></span>
              <span class='name' style="color:#00AFC3">需量</span>

              <span class='icon' style="background-color:#FF5227"></span>
              <span class='name' style="color:#FF5227">满足85%需量</span>

              <span class='icon' style="background-color:#68C4FD"></span>
              <span class='name' style="color:#68C4FD">满足90%需量</span>

              <span class='icon' style="background-color:#AE716E"></span>
              <span class='name' style="color:#AE716E">满足95%需量</span>

              <span class='icon' style="background-color:#44D428"></span>
              <span class='name' style="color:#44D428">月最大需量</span>

              <span class='icon' style="background-color:#FF9200"></span>
              <span class='name' style="color:#FF9200">最低申报需量</span>

              <span class='icon' style="background-color:#B06EF3"></span>
              <span class='name' style="color:#B06EF3">平衡负荷</span>
            </div>
            <ec1 class='ec' height='400px' :ecdata='EC1_data'> </ec1>
          </el-col>
        </el-row>
      </div>
    </el-collapse-transition>
    <div class='l_r_title ' @click='show_2=!show_2' style='margin-top:10px'>
      <p>电度电费</p>
      <p class='right'>
        <span v-if='!show_2'> <i class='el-icon-arrow-down'></i></span>
        <span v-else> <i class='el-icon-arrow-up'></i></span>
      </p>
    </div>
    <!-- ==========企业分时电费占比========== -->
    <el-collapse-transition>
      <div v-show='show_2'>
        <el-row class='' style='background:#ffffff'>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <div class=''>
              <Mtitle title='企业分时电费占比'>
              </Mtitle>
              <ecpie unit='万元' class='ec' width='100%' height='400px' :ecdata='EC4_data'> </ecpie>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <div class=''>
              <Mtitle title='各车间电度电费统计'>
              </Mtitle>
              <ec5 class='ec' width='100%' height='400px' :ecdata='EC5_data'> </ec5>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-collapse-transition>
    <div class='l_r_title' @click='show_3=!show_3' style='margin-top:10px'>
      <p>功率因数奖惩</p>
      <p class='right'>
        <span v-if='!show_3'> <i class='el-icon-arrow-down'></i></span>
        <span v-else> <i class='el-icon-arrow-up'></i></span>
      </p>
    </div>
    <div class='yinshugonglv'>
      <p class='right' v-if="avgPower>=0.9">平均功率因数 <span style='margin-right:20px' class='green'>{{avgPower}}</span><span class='green'>进入奖励区间</span></p>
      <p class='right' v-else-if="avgPower<0.9">平均功率因数 <span style='margin-right:20px' class='pink'>{{avgPower}}</span><span class='pink' v-show="avgPower">进入惩罚区间</span></p>
    </div>
    <!-- ==========功率因数变化趋势========== -->
    <el-collapse-transition>
      <div v-show='show_3'>
        <el-row class="">
          <el-col>
            <Mtitle title='功率因数变化趋势'>
            </Mtitle>
            <!-- <ec2 class='ec' width='100%' height='300px' v-loading='EC2_data_loading' :ecdata='EC2_data'>  </ec2> -->
            <ecline height='400px' unit='' :visualMap=0.9 :linedata="line" :ecdata='EC2_data'></ecline>
          </el-col>
        </el-row>
        <!-- ==========功率因数惩罚区间表========== -->
        <el-row class=''>
          <el-col>
            <Mtitle title='功率因数惩罚区间表'>
              <p class='right' v-if='occurTime'> {{p}}<span class='green' v-show="occurTime">{{occurTime}}分钟 </span>, 占本周期系统运行时间 <span class='green' v-show="percentage">{{percentage}}%</span></p>
              <p class='right' v-else>查询周期内一切正常</p>
            </Mtitle>
            <el-table border  empty-text=" " :data="table_2_data_c" style="width: 100%" :span-method="objectSpanMethod">
              <el-table-column prop="num" align='center' :render-header="(h)=>{return [h('span', {}, '功率因数惩罚区间'), h('br', {}, ['']), h('span', {}, '')]}" width="">
              </el-table-column>
              <el-table-column prop="time" :render-header="(h)=>{return [h('span', {}, '发生时间'), h('br', {}, ['']), h('span', {}, '')]}" align='center' width="">
              </el-table-column>
              <el-table-column prop="value" :render-header="(h)=>{return [h('span', {}, '功率因数'), h('br', {}, ['']), h('span', {}, '')]}" align='center' width="">
              </el-table-column>
              <el-table-column prop="" :render-header="(h)=>{return [h('span', {}, '操作'), h('br', {}, ['']), h('span', {}, '')]}" align='center' width="110">
                <template slot-scope="scope">
                  <el-button type="success" @click.native='open_dialog_02(scope.row.time)' size='mini'>详情</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class='down_up' v-show="table_2_data.length>5" @click="table_2_data_length === 5?table_2_data_length = table_2_data.length:table_2_data_length = 5">
              <i :class='table_2_data_length===5?"el-icon-arrow-down":"el-icon-arrow-up"'></i>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-collapse-transition>
    <!-- ==========日功率因数详情弹出框========== -->
    <el-dialog :title="`日功率因数详情 ${dialog_02_time}`" width="80vw" :visible.sync="dialog_02">
      <Mtitle title='功率因数变化曲线'>
        <p>
          <span>平均功率因数</span>
          <span :style="{ color: `${avgPower_details>=0.9?'#44D428':'#DD3E5F'}`, margin:'0 10px' }" class='green'>{{avgPower_details}}</span>
          <span :style="{ color: `${avgPower_details>=0.9?'#44D428':'#DD3E5F'}` }">{{avgPower_details>=0.9?'进入奖励区间':'进入惩罚区间'}}</span>
        </p>
      </Mtitle>
      <!-- <ec2 class='ec' width='100%' height='400px' v-loading='EC2_data_details_loading' :ecdata='EC2_data_details'>  </ec2> -->
      <ecline height='400px' unit='' :visualMap=0.9 :linedata="line" :ecdata='EC2_data_details'></ecline>
    </el-dialog>
  </div>
</template>
<script>
import day from "@/utils/day.js";
import Mtitle from '@/components/Mtitle'
import ecline from '@/components/echarts/ec_line'
import ecpie2 from '@/components/echarts/ec_pie_2'
import ecpie from '@/components/echarts/ec_pie'
import tb from '@/components/table'

import ec2 from './EC_2'
import ec1 from './EC_1'
import ec5 from './EC_5'
import ec4 from '@/components/echarts/ec_pie'
import './index.scss'
export default {
  name: 'cost',
  components: {
    Mtitle,
    ecline,
    ecpie,
    ecpie2,
    tb,
    ec2,
    ec1,
    ec4,
    ec5,
  },
  watch: {
    checked(n, o) {
      if (!n) {
        this.table_4_data = []
        this.initScope_input = ''
      }
    },
    initScope_input(n, o) {
      if (this.checked) {
        if (n < 1 || n > 10) {
          this.initScope_input = ' '
          this.initScope_off = true
          this.$message("请输入1～10的整数进行查询");
        }
        else {
          this.initScope_off = false
        }
      }
    }
  },
  computed: {
    table_2_data_c: function () {
      return this.table_2_data.filter((item, index) => {
        return index < this.table_2_data_length
      })
    },
    table_1_data_c: function () {
      return this.table_1_data.filter((item, index) => {
        return index < this.table_1_length
      })
    }
  },
  data() {
    return {
      p: '功率因数 < 0.90 共发生',
      line: [
        { yAxis: 0.9 }
      ],
      show_1: false,
      show_2: false,
      show_3: false,
      findBillFees: {
        "baseFee": '--',
        "elecFee": {
          "flatFees": '--',
          "peakFees": '--',
          "sumFees": '--',
          "tipFees": '--',
          "valleyFees": '--'
        },
        "rewardFee": '-',
        "sum": '--'
      },
      EC4_data: [],
      EC5_data: [],
      s_1_time: '',
      e_1_time: '',


      dialog_01: false,
      dialog_01_time: '',
      dialog_02: false,
      dialog_02_time: '',
      // 企业负荷详情日期查询
      // qiyefuhe_time: '',

      checked: false,
      table_1_length: 5,
      table_2_data_length: 5,
      // ==========
      initScope_off: true,
      // 获取自定义申报需量列表
      initScope_query_loading: true,
      table_4_data: [],
      initScope_input: '',
      // ==========
      // 获取推荐申报需量列表
      table_3_data: [],
      // ==========
      // 获取最大需量区间列表
      table_1_data: [],
      table_1_show: true,
      spec: '最大需量',
      // ==========
      // 获取企业的需量信息
      EC1_data: [],
      // ==========
      // 用电成本优化-功率因数分析-功率因数惩罚区间
      table_2_data: [],
      // 发生时间
      occurTime: '',
      // 百分比
      percentage: '',
      // ==========
      // 用电成本优化-功率因数分析-变化趋势
      EC2_data: [],
      // 平均功率因数
      avgPower: 0,
      // 详情
      EC2_data_details: [],
      avgPower_details: '',
      // =================
      // 各车间负荷占比
      // left饼图
      EC_left_data: [],
      // right饼图
      EC_right_data: [],
      // ====================
      // 实时需量分布图
      EC3_data: {},
      // ============初始开始时间==================
      s_time: "",
      // ============初始结束时间==================
      e_time: "",
      // ============初始日期格式==================
      v_type: "yyyy-MM-dd",
      // ============初始显示类型==================
      d_type: "date",
      // ============日月年默认为日=================
      t_value: 1,
      // ============时间维度下拉框==================
      options_t_type: [
        {
          value: 1,
          label: "日"
        },
        {
          value: 2,
          label: "月"
        },
        {
          value: 3,
          label: "年"
        }
      ],
      // ============显示选择日期==================
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      // ==============================
    };
  },
  mounted() {
  },
  created() {
    //==========获取默认日期==========
    this.findAccountingCycle()
  },
  methods: {
    // ==========初始化数据==========
    initdata() {
      this.checked = false
      this.table_4_data = []
      this.initScope_input = ''
      // 获取企业的需量信息
      this.findDemandInfo()
      // 获取最大需量区间列表
      this.findDetailInfo()
      // 用电成本优化-功率因数分析-变化趋势
      this.getAvgPowerFactorDay()
      // 用电成本优化-功率因数分析-功率因数惩罚区间
      this.getPowerFactorMinute()
      // 获取推荐申报需量列表
      this.adviceDemandList()
      // 企业电度电费占比
      this.findCustPie()
      // 各车间电度电费占比
      this.findWorkshopPie()
      // 电费详情
      this.getfindBillFees()
    },
    //==========打开日需量详情=========
    open_dialog_01(p) {
      this.dialog_01 = true
      // this.dialog_01_time = p
      // 各车间负荷占比
      // this.findShopLoad(item.time)
      // 实时需量分布图
      // this.addElectric(item.time)
    },
    //==========日功率因数详情==========
    open_dialog_02(p) {
      this.dialog_02 = true
      this.dialog_02_time = p.substr(0, 10)
      this.EC2_data_details_loading = true
      // 功率因数惩罚区间-日功率因数详情
      this.getPowerFactorDetails(p.substr(0, 10))
    },
    // 日需量详情
    dialog_01_click(item, list) {
      alert(item.time)
      this.dialog_01 = true
      this.dialog_01_time = item.time
      // 各车间负荷占比
      this.findShopLoad(item.time.substr(0, 16))
      // 实时需量分布图
      this.addElectric(item.time.substr(0, 16))
      this.qiyefuhe_time = item.time.substr(0, 10)
    },
    findDemandIntervalList(item) {
      this.$axios
        .post(this.Eelec + "/web/powerOpt/findDemandIntervalList", {
          custId: sessionStorage.getItem("custId"),
          startTime: this.s_time,
          endTime: this.e_time,
          decDemandValue: item.decDemand,
        })
        .then(res => {
          if (res.data.code === 200) {
            if (res.data.data) {
              this.table_1_data = res.data.data
              //   let arr = res.data.data.dataRespList.map((item, index) => {
              //   return {
              //     time: item.time,
              //     value: item.value,
              //     interval: res.data.data.interval
              //   }
              // })
              // this.table_1_data = arr
              this.spec = item.spec
              this.table_1_show = true
              this.table_1_length = 5
            } else {
              this.table_1_data = []
            }
          } else {
            this.table_1_data = []
          }
        });
    },
    //==========实时需量分布图==========
    addElectric(time) {
      this.$axios
        .post(this.Eelec + "/web/powerOpt/addElectric", {
          custId: sessionStorage.getItem("custId"),
          time: time
        })
        .then(res => {
          if (res.data.code === 200) {
            if (res.data.data && res.data.data.dataResp) {
              this.EC3_data = res.data.data
            } else {
              this.EC3_data = {}
            }
          } else {
            this.EC3_data = {}
          }
        }).catch((err) => {
          this.EC3_data = {}
        });;
    },
    //==========各车间负荷占比=========
    findShopLoad(time) {
      this.$axios
        .post(this.Eelec + "/web/powerOpt/findShopLoad", {
          custId: sessionStorage.getItem("custId"),
          time: time
        })
        .then(res => {
          if (res.data.code === 200) {
            if (res.data.data) {
              if (res.data.data[0].detailList && res.data.data[0].type) {
                if (res.data.data[0].type === '02') {
                  this.EC_left_data = res.data.data[0].detailList
                } else {
                  this.EC_right_data = res.data.data[0].detailList
                }
              }
              if (res.data.data[1].detailList && res.data.data[1].type) {
                if (res.data.data[1].type === '02') {
                  this.EC_left_data = res.data.data[1].detailList
                } else {
                  this.EC_right_data = res.data.data[1].detailList
                }
              }
            }
          }
        })
    },
    //==========自定义范围点击查询==========
    initScope_query() {
      this.defineDemandList(parseInt(this.initScope_input))
      this.initScope_query_loading = false
    },
    //==========电费详情==========
    getfindBillFees() {
      this.$axios
        .post(this.Eelec + "/web/powerOpt/findBillFees", {
          custId: sessionStorage.getItem("custId"),
          startTime: this.s_time,
          endTime: this.e_time,
        })
        .then(res => {
          if (res.data.code === 200) {
            if (res.data.data) {
              this.findBillFees = res.data.data
              this.s_1_time = this.s_time
              this.e_1_time = this.e_time
            } else {
              this.findBillFees = {
                "baseFee": '--',
                "elecFee": {
                  "flatFees": '--',
                  "peakFees": '--',
                  "sumFees": '--',
                  "tipFees": '--',
                  "valleyFees": '--'
                },
                "rewardFee": '-',
                "sum": '--'
              }
            }
          } else {
            this.findBillFees = {
              "baseFee": '--',
              "elecFee": {
                "flatFees": '--',
                "peakFees": '--',
                "sumFees": '--',
                "tipFees": '--',
                "valleyFees": '--'
              },
              "rewardFee": '-',
              "sum": '--'
            }
          }
        });
    },

    //==========企业电度电费占比==========
    findCustPie() {
      this.$axios
        .post(this.Eelec + "/web/powerOpt/findCustPie", {
          custId: sessionStorage.getItem("custId"),
          startTime: this.s_time,
          endTime: this.e_time,
        })
        .then(res => {
          if (res.data.code === 200) {
            this.EC4_data_loading = false
            if (res.data.data.length) {
              this.EC4_data = res.data.data
            } else {
              this.EC4_data = []
            }
          } else {
            this.EC4_data = []
          }
        });
    },
    //==========各车间电度电费占比==========
    findWorkshopPie() {
      this.$axios
        .post(this.Eelec + "/web/powerOpt/findWorkshopPie", {
          custId: sessionStorage.getItem("custId"),
          startTime: this.s_time,
          endTime: this.e_time,
        })
        .then(res => {
          if (res.data.code === 200) {
            this.EC5_data_loading = false
            if (res.data.data.length) {
              this.EC5_data = res.data.data
            } else {
              this.EC5_data = []
            }
          } else {
            this.EC5_data = []
          }
        });
    },
    //==========获取企业默认查询时间==========
    findAccountingCycle() {
      this.$axios
        .post(this.Eelec + "/web/powerOpt/findAccountingCycle", {
          custID: sessionStorage.getItem("custId")
        })
        .then(res => {
          if (res.data.code === 200) {
            if (res.data.data.monthStart && res.data.data.monthEnd) {
              this.s_time = res.data.data.monthStart
              this.e_time = res.data.data.monthEnd
              this.initdata()
            }
          }
        });
    },
    //==========获取自定义申报需量列表==========
    defineDemandList(n) {
      this.$axios
        .post(this.Eelec + "/web/powerOpt/defineDemandList", {
          custId: sessionStorage.getItem("custId"),
          startTime: this.s_time,
          endTime: this.e_time,
          section: n,
        })
        .then(res => {
          if (res.data.code === 200) {
            this.initScope_query_loading = true
            this.table_4_data = res.data.data
            if (!res.data.data) {
              this.$message("暂无数据");
            }
          }
        });
    },
    //==========获取推荐申报需量列表==========
    adviceDemandList() {
      this.$axios
        .post(this.Eelec + "/web/powerOpt/adviceDemandList", {
          custId: sessionStorage.getItem("custId"),
          startTime: this.s_time,
          endTime: this.e_time
        })
        .then(res => {
          if (res.data.code === 200) {
            this.table_3_data_loading = false
            if (res.data.data) {
              let arr = []
              arr[0] = res.data.data[0]
              arr[1] = res.data.data[3]
              arr[2] = res.data.data[1]
              arr[3] = res.data.data[2]
              this.table_3_data = arr
            }
            else {
              this.table_3_data = []
            }
          } else {
            this.table_3_data = []
          }
        });
    },
    //==========用电成本优化-功率因数分析-变化趋势==========
    getAvgPowerFactorDay() {
      this.$axios
        .post(this.Eelec + "/electricityAnalysis/getAvgPowerFactorDay", {
          custId: sessionStorage.getItem("custId"),
          start: this.s_time,
          end: this.e_time
        })
        .then(res => {
          if (res.data.code === 200) {

            if (res.data.data.dataResps) {
              this.avgPower = res.data.data.avgPower
              // this.EC2_data = res.data.data.dataResps
              this.EC2_data = [{
                name: '功率因数',
                value: res.data.data.dataResps
              }]
            }
          }
        });
    },
    //==========用电成本优化-功率因数分析-功率因数惩罚区间==========
    getPowerFactorMinute() {
      this.$axios
        .post(this.Eelec + "/electricityAnalysis/getPowerFactorMinute", {
          custId: sessionStorage.getItem("custId"),
          start: this.s_time,
          end: this.e_time
        })
        .then(res => {
          if (res.data.code === 200) {
            this.EC2_data_loading = false
            this.table_2_data_loading = false
            if (res.data.data.dataResps) {
              let arr = res.data.data.dataResps.map((item, index) => {
                return {
                  time: item.time,
                  value: item.value,
                  num: '<0.9'
                }
              })
              this.percentage = res.data.data.percentage
              this.table_2_data = arr
              this.occurTime = res.data.data.occurTime
            }
          }
        });
    },
    //==========功率因数惩罚区间-日功率因数详情==========
    getPowerFactorDetails(t) {
      this.$axios
        .post(this.Eelec + "/electricityAnalysis/getPowerFactorDetails", {
          custId: sessionStorage.getItem("custId"),
          start: t,
        })
        .then(res => {
          if (res.data.code === 200) {
            this.EC2_data_details_loading = false
            if (res.data.data.dataResps) {
              this.avgPower_details = res.data.data.avgPower
              this.EC2_data_details = [{
                name: '功率因数',
                value: res.data.data.dataResps
              }]

            }
          }
        });
    },
    //==========获取企业的需量信息==========
    findDemandInfo() {
      this.$axios
        .post(this.Eelec + "/web/powerOpt/findDemandInfo", {
          custId: sessionStorage.getItem("custId"),
          startTime: this.s_time,
          endTime: this.e_time
        })
        .then(res => {
          if (res.data.code === 200) {
            this.EC1_data_loading = false
            if (res.data.data && res.data.data.demandData) {
              this.EC1_data = res.data.data
            } else {
              this.EC1_data = {}
            }
          }
        });
    },
    //==========获取最大需量区间列表==========
    findDetailInfo() {
      this.$axios
        .post(this.Eelec + "/web/powerOpt/findDetailInfo", {
          custId: sessionStorage.getItem("custId"),
          startTime: this.s_time,
          endTime: this.e_time
        })
        .then(res => {
          if (res.data.code === 200) {
            this.table_1_data_loading = false
            if (res.data.data && res.data.data.dataRespList) {

              // let arr = res.data.data.dataRespList.map((item, index) => {
              //   return {
              //     time: item.time,
              //     value: item.value,
              //     interval: res.data.data.interval
              //   }
              // })
              this.table_1_data = [{
                interval: res.data.data.interval,
                dataRespList: res.data.data.dataRespList
              }]
            } else {
              this.table_1_data = []
            }
          } else {
            this.table_1_data = []
          }
        });
    },
    //==========合并表格单元格==========
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % this.table_2_data.length === 0) {
          return {
            rowspan: this.table_2_data.length,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    //==========点击查询==========
    t_button() {
      day.s_e(this.s_time, this.e_time, 0, [28, 92])
        .then(() => {
          this.table_3_data_loading = true
          this.table_1_data_loading = true
          this.table_2_data_loading = true
          this.EC2_data_loading = true
          this.EC4_data_loading = true
          this.EC1_data_loading = true
          this.EC4_data_loading = true
          this.initdata()
        })
        .catch(() => { });
    },
    //==========切换年月日==========
    t_change(n) {
      this.v_type = day.change_type(n).v;
      this.d_type = day.change_type(n).d;
      this.s_e = day.init_value(this.d_type)
      this.s_time = this.s_e.s;
      this.e_time = this.s_e.e;
    }
  }
};
</script>
 <style scoped lang='scss'>
.el_show1 {
  .el-table__empty-block {
    display: none !important;
  }
}
.el-row {
  padding: 0 10px;
  background: #ffffff;
}
.down_up {
  text-align: center;
  padding: 5px;
  font-size: 20px;
  background: rgba(7, 128, 237, 0.1);
  color: rgba(7, 128, 237, 1);
}
.dianfei {
  padding: 10px;
  li {
    height: 34px;
    margin-bottom: 5px;
    color: #666666;
    font-size: 14px;
    padding: 0 10px;
    .right {
      color: #333333;
      font-size: 18px;
      i {
        font-size: 12px;
        color: #999999;
        font-style: initial;
        margin-left: 5px;
      }
    }
  }
  .color {
    background: #f8f8f8;
  }
}
.chengben {
  padding: 0 20px;
  height: 49px;
  background: #0780ed;
  color: #ffffff;
  margin-top: 10px;
  .left {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
  }
  .right {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
  }
}
.dianwang {
  padding: 0 20px;
  height: 68px;
  color: #999999;
  .left {
    font-size: 14px;
    i {
      font-size: 25px;
      margin-right: 20px;
    }
  }
  .right {
    font-size: 12px;
  }
}
.green {
  color: #44d428;
}
.pink {
  color: #ec0040;
}
.legend {
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
  align-items: center;
  .icon {
    width: 15px;
    height: 2px;
    display: inline-block;
    background: red;
    margin-right: 10px;
  }
  .cir {
    background: #00afc3;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
  .name {
    padding-right: 20px;
    font-size: 12px;
  }
}
.l_r_title {
  height: 50px;
  // color: #333333;
  font-size: 16px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(7, 128, 237, 0.1);
  cursor: pointer;
  span {
    font-size: 14px;
    // color: #999999;
  }
  i {
    font-size: 16px;
  }
}
.yinshugonglv {
  font-size: 14px;
  // color: #666666;
  background: #ffffff;
  height: 46px;
  padding: 0 20px;
  p {
    height: 46px;
    line-height: 46px;
    border-bottom: 1px solid #e9e9e9;
  }
}
.jibendianfei {
  height: 42px;
  border-bottom: 1px solid #e9e9e9;
  background: #ffffff;
  display: flex;
  align-items: center;
  ul {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    li {
      flex: 1;
      display: flex;
      border-right: 1px solid #e9e9e9;
      align-items: center;
      justify-content: center;
      height: 23px;
      color: #666666;
      font-size: 14px;
      span {
        color: #333;
        font-size: 18px;
        margin: 0px 5px;
      }
      .last {
        color: #44d428;
      }
      .last_ {
        color: #ec0040;
      }
      i {
        font-size: 12px;
        color: #999999;
        font-style: initial;
      }
    }
  }
}
</style>
